@tailwind base;
@tailwind components;
@tailwind utilities;

/* https://tailwindcss.com/docs/adding-base-styles#using-css */
@layer base {
    @font-face {
        font-family: 'Monument Extended';
        font-weight: 100;
        src: url('/assets/fonts/monument/MonumentExtended-Thin.woff2') format('woff2');
    }

    @font-face {
        font-family: 'Monument Extended';
        font-weight: 200;
        src: url('/assets/fonts/monument/MonumentExtended-Light.woff2') format('woff2');
    }

    @font-face {
        font-family: 'Monument Extended';
        font-weight: 300;
        src: url('/assets/fonts/monument/MonumentExtended-Book.woff2') format('woff2');
    }

    @font-face {
        font-family: 'Monument Extended';
        font-weight: 400;
        src: url('/assets/fonts/monument/MonumentExtended-Regular.woff2') format('woff2');
    }

    @font-face {
        font-family: 'Monument Extended';
        font-weight: 500;
        src: url('/assets/fonts/monument/MonumentExtended-Medium.woff2') format('woff2');
    }

    @font-face {
        font-family: 'Monument Extended';
        font-weight: 700;
        src: url('/assets/fonts/monument/MonumentExtended-Bold.woff2') format('woff2');
    }

    @font-face {
        font-family: 'Monument Extended';
        font-weight: 800;
        src: url('/assets/fonts/monument/MonumentExtended-Black.woff2') format('woff2');
    }

    @font-face {
        font-family: 'Monument Extended';
        font-weight: 900;
        src: url('/assets/fonts/monument/MonumentExtended-Heavy.woff2') format('woff2');
    }

    @font-face {
        font-family: 'Inter';
        src: url('/assets/fonts/inter/Inter-Variable.woff2') format('woff2-variations');
        font-weight: 100 900;
    }

    body {
        @apply text-white bg-black;
        overflow: hidden;
    }

    input {
        outline: 0;
    }

    /* This prevents inputs from having a white background when user autofills them
       TODO: Move this into design system
       https://stackoverflow.com/a/41148494 */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
        border: none !important;
        caret-color: white !important;
        -webkit-text-fill-color: white !important;
        -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    h1 {
        @apply text-5xl font-bold font-display;
    }

    h2 {
        @apply text-4xl font-bold font-display;
    }

    h3 {
        @apply text-3xl font-bold font-display;
    }

    h4 {
        @apply text-2xl font-bold font-display;
    }

    h5 {
        @apply text-lg font-bold font-display;
    }

    h6 {
        @apply text-base font-bold font-display;
    }

    .scrollbar-none {
        overflow: -moz-scrollbars-none;
    }

    .scrollbar-none::-webkit-scrollbar {
        width: 0 !important;
    }

    .custom-gray-scroll::-webkit-scrollbar {
        height: 14px;
        width: 14px;
    }

    .custom-gray-scroll::-webkit-scrollbar-thumb {
        border: 4px solid rgba(0, 0, 0, 0);
        background-clip: content-box;
        @apply bg-gray-200 rounded-full;
    }

    .custom-gray-scroll {
        overflow: overlay !important;
    }

    @-moz-document url-prefix() {
        .custom-gray-scroll {
            overflow: auto !important;
        }
    }
}

/* tiptap / prosemirror customization */
.ProseMirror:focus {
    outline: none;
}

.ProseMirror p.placeholder:first-child::before {
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
}

.radial-gradient-background {
    background-image: radial-gradient(
        60% 200% at 50% 50%,
        rgba(67, 97, 238, 0.5) 0%,
        transparent 100%
    );
}

.radial-gradient-background-dark {
    background-image: radial-gradient(
        100% 100% at clamp(20%, calc(30% + var(--mx) * 0.05), 40%)
            clamp(50%, calc(50% + var(--my) * 0.05), 60%),
        #4361ee33 0%,
        #16161af4 120%
    );
}
